<div id="admin-project-detail">
  <div class="col-lg-12">
    <!-- main panel -->
    <section class="panel-container">
      <md-toolbar>
        <div class="md-toolbar-tools">
          <h3 class="md-button md-ink-ripple" ui-sref="banshee.metric({project: projectId})" ng-style="{'text-transform': 'none'}">
            <a ui-sref="banshee.metric({project: projectId})" ng-bind="team.name + ':'+ project.name"></a>
          </h3>
        </div>
      </md-toolbar>
      <!-- Panel content -->
      <section class="panel-content">
        <!-- tabs -->
        <md-tabs md-dynamic-height md-border-bottom>
          <!-- Rules -->
          <md-tab label="{{ 'ADMIN_PROJECT_RULES_TEXT' | translate }}">
            <md-content class="md-padding">
              <div ng-style="{'text-align': 'right'}" >
                <md-button class="md-raised md-mini" aria-label="{{ 'ADMIN_RULE_DOWNLOAD_TEXT' | translate }}" ng-click="exportRules()">
                  <md-icon class="fa fa-download"  aria-hidden="true" ng-style="{'font-size': '21px'}"></md-icon>
                  <md-tooltip md-autohide>{{ 'ADMIN_RULE_DOWNLOAD_TEXT' | translate }}</md-tooltip>
                </md-button>
                <md-button class="md-raised md-mini" aria-label="{{ 'ADMIN_RULE_UPLOAD_TEXT' | translate }}" ngf-select="importRules($file)">
                  <md-icon class="fa fa-upload" aria-hidden="true" ng-style="{'font-size': '21px'}"></md-icon>
                  <md-tooltip md-autohide>{{ 'ADMIN_RULE_UPLOAD_TEXT' | translate }}</md-tooltip>
                </md-button>
                <md-button class="md-raised md-mini" aria-label="{{ 'ADMIN_RULE_ADD_TEXT' | translate }}" ng-click="openModal($event, 'addRule')">
                  <md-icon class="fa fa-plus-circle" ng-style="{'font-size': '21px'}"></md-icon>
                  <md-tooltip md-autohide>{{ 'ADMIN_RULE_ADD_TEXT' | translate }}</md-tooltip>
                </md-button>
              </div>
              <!-- Table -->
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th> # </th>
                      <th> {{ 'ADMIN_RULE_PATTERN' | translate }} </th>
                      <th> {{ 'ADMIN_RULE_COMMENT' | translate }} </th>
                      <th> {{ 'ADMIN_RULE_CONDITION' | translate }} </th>
                      <th> {{ 'ADMIN_RULE_NUMMETRICS' | translate }} </th>
                      <th> {{ 'ADMIN_RULE_LEVEL' | translate }} </th>
                      <th> {{ 'ADMIN_RULE_CHECK' | translate }} </th>
                      <th class="th100"></th>
                    </tr>
                  </thead>
                  <tbody>
                    <md-progress-linear md-mode="indeterminate" ng-if="!rules"></md-progress-linear>
                    <tr ng-if="!rules || !rules.length">
                      <td colspan="3">{{ 'NOT_FOUND_ANY_RESULT' | translate }}</td>
                    </tr>
                    <tr ng-repeat="rule in rules" ng-style="isRuleDisabledWorksNow(rule)?{'background-color': '#eee'}:{}">
                      <td class="padding-left-16" ng-bind="$index+1"></td>
                      <td>
                        <a ui-sref="banshee.metric({pattern: rule.pattern})">
                          <kbd ng-if="!isRuleDisabledWorksNow(rule)" ng-bind="rule.pattern" ng-style="{'font-weight': 'bold'}"></kbd>
                          <kbd ng-if="isRuleDisabledWorksNow(rule)" ng-bind="rule.pattern" class="del" ng-style="{'color': '#ddd'}"></kbd>
                        </a>
                        <md-tooltip ng-if="isRuleDisabledWorksNow(rule)" md-autohide>{{ 'ADMIN_RULE_DISABLED' | translate }}</md-tooltip>
                      </td>
                      <td>
                        <span ng-class="{del: isRuleDisabledWorksNow(rule)}" ng-bind="rule.comment"></span>
                      </td>
                      <td>
                        <code ng-if="!isRuleDisabledWorksNow(rule)" ng-bind="buildRepr(rule)"></code>
                        <code ng-if="isRuleDisabledWorksNow(rule)"  class="del" ng-bind="buildRepr(rule)" ng-style="{'color': '#999'}"></code>
                        <md-tooltip md-autohide>{{ translateRuleRepr(rule) }}</md-tooltip>
                      </td>
                      <td>
                        <a ui-sref="banshee.metric({pattern: rule.pattern})">
                          <kbd ng-if="rule.numMetrics<=config.detector.intervalHitLimit" ng-bind="rule.numMetrics" ng-style="{'font-weight': 'bold'}"></kbd>
                          <kbd ng-if="rule.numMetrics>config.detector.intervalHitLimit" ng-bind="rule.numMetrics" ng-style="{'font-weight': 'bold', 'color': 'red'}">
                            <md-tooltip md-autohide>{{ translateRuleNumMetricsWarn() }}</md-tooltip>
                          </kbd>
                        </a>
                      </td>
                      <td>
                        <span class="label label-info" ng-if="rule.level==0">{{ 'ADMIN_RULE_LEVEL_LOW' | translate }}</span>
                        <span class="label label-warning" ng-if="rule.level==1">{{ 'ADMIN_RULE_LEVEL_MIDDLE' | translate }}</span>
                        <span class="label label-danger" ng-if="rule.level==2">{{ 'ADMIN_RULE_LEVEL_HIGH' | translate }}</span>
                      </td>
                      <td>
                        <span class="label label-success" ng-if="ruleCheck(rule)===0">{{ 'ADMIN_RULE_CHECK_VALID' | translate }}</span>
                        <span class="label label-danger" ng-if="ruleCheck(rule)!==0">{{ 'ADMIN_RULE_CHECK_INVALID' | translate }}</span>
                        <md-tooltip ng-if="ruleCheck(rule)===1" md-autohide>{{ 'ADMIN_RULE_CHECK_INVALID_HINT_GRAPHITENAME' | translate }}</md-tooltip>
                        <md-tooltip ng-if="ruleCheck(rule)===2" md-autohide>{{ 'ADMIN_RULE_CHECK_INVALID_HINT_UNSUPPORTED_METRIC' | translate }}</md-tooltip>
                      </td>
                      <td class="text-right">
                        <md-button class="md-raised md-mini" aria-label="{{ 'ADMIN_RULE_EDIT_TEXT' | translate }}" ng-click="editRule($event, rule)">
                          <i class="fa fa-pencil-square-o"></i>
                        </md-button>
                        <md-button class="md-raised md-warn md-mini" aria-label="{{ 'ADMIN_RULE_DELETE_TEXT' | translate }}" ng-click="deleteRule($event, rule.id, $index)">
                          <i class="fa fa-trash-o"></i>
                        </md-button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!-- ./Table -->
            </md-content>
          </md-tab> <!-- ./Rules -->
          <!-- Users -->
          <md-tab label="{{ 'ADMIN_PROJECT_USERS_TEXT' | translate }}" ng-click="loadUsers()">
            <md-content class="md-padding">
              <div ng-style="{'text-align': 'right'}" layout-padding>
                <md-button class="md-raised md-mini" aria-label="{{ 'ADMIN_USER_ADD_TEXT' | translate }}" ng-click="openModal($event, 'addUserToProject')">
                  <md-icon class="fa fa-plus-circle" ng-style="{'font-size': '21px'}"></md-icon>
                  <md-tooltip md-autohide>{{ 'ADMIN_USER_ADD_TEXT' | translate }}</md-tooltip>
                </md-button>
              </div>
              <!-- Table -->
              <div class="table-responsive">
                <table class="table">
                  <tbody>
                  <md-progress-linear md-mode="indeterminate" ng-if="!users"></md-progress-linear>
                    <tr ng-if="!users || !users.length">
                      <td colspan="3"> {{ 'NOT_FOUND_ANY_RESULT' | translate }}</td>
                    </tr>
                    <tr ng-repeat="user in users">
                      <td ng-bind="$index+1" class="th50"></td>
                      <td>
                        <a ng-bind="user.name" ui-sref='banshee.admin.user.detail({id: user.id})' class="md-body-2"></a>
                      </td>
                      <td class="text-right">
                        <label class="label label-success" ng-if="user.universal">{{ 'ADMIN_PROJECT_USER_UNIVERSAL' | translate }}</label>
                        <md-button class="md-raised md-warn md-mini" aria-label="Remove User" ng-click="deleteUser($event, user.id, $index)" ng-if="!user.universal">
                          <md-icon class="fa fa-trash-o" ng-style="{'font-size': '21px'}"></md-icon>
                          <md-tooltip md-autohide>{{ 'ADMIN_USER_REMOVE_TEXT' | translate }}</md-tooltip>
                        </md-button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div> <!-- ./Table -->
            </md-content>
          </md-tab> <!-- ./Users -->

	  <!-- WebHooks -->
          <md-tab label="{{ 'ADMIN_PROJECT_WEBHOOKS_TEXT' | translate }}" ng-click="loadWebHooks()">
            <md-content class="md-padding">
              <div ng-style="{'text-align': 'right'}" layout-padding>
                <md-button class="md-raised md-mini" aria-label="{{ 'ADMIN_WEBHOOK_ADD_TEXT' | translate }}" ng-click="openModal($event, 'addWebHookToProject')">
                  <md-icon class="fa fa-plus-circle" ng-style="{'font-size': '21px'}"></md-icon>
                  <md-tooltip md-autohide>{{ 'ADMIN_WEBHOOK_ADD_TEXT' | translate }}</md-tooltip>
                </md-button>
              </div>
              <!-- Table -->
              <div class="table-responsive">
                <table class="table">
                  <tbody>
                  <md-progress-linear md-mode="indeterminate" ng-if="!loadWebHooksDone"></md-progress-linear>
                    <tr ng-if="!webhooks || !webhooks.length">
                      <td colspan="3"> {{ 'NOT_FOUND_ANY_RESULT' | translate }}</td>
                    </tr>
                    <tr ng-repeat="webhook in webhooks">
                      <td ng-bind="$index+1" class="th50"></td>
                      <td>
                        <a ng-bind="webhook.name" ui-sref='banshee.admin.webhook.detail({id: webhook.id})' class="md-body-2"></a>
                      </td>
                      <td class="text-right">
                        <label class="label label-success" ng-if="webhook.universal">{{ 'ADMIN_PROJECT_USER_UNIVERSAL' | translate }}</label>
                        <md-button class="md-raised md-warn md-mini" aria-label="Remove WebHook" ng-click="deleteWebHook($event, webhook.id, $index)" ng-if="!webhook.universal">
                          <md-icon class="fa fa-trash-o" ng-style="{'font-size': '21px'}"></md-icon>
                          <md-tooltip md-autohide>{{ 'ADMIN_USER_REMOVE_TEXT' | translate }}</md-tooltip>
                        </md-button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div> <!-- ./Table -->
            </md-content>
          </md-tab> <!-- ./WebHooks -->
	  
          <!-- Edit -->
          <md-tab label="{{ 'ADMIN_PROJECT_EDIT_TEXT' | translate }}">
            <md-content class="md-padding">
              <!-- Form -->
              <form name="form" ng-submit="edit()" onvalidate>
                <md-content layout-padding>
                  <md-input-container class="md-block" flex-gt-sm>
                  <label>{{ 'ADMIN_PROJECT_NAME' | translate }}</label>
                    <input type="text" name="projectName" ng-model="project.name" required>
                    <div ng-messages="form.projectName.$error" ng-if="form.projectName.$dirty">
                      <div ng-message="required">{{ 'FIELD_IS_REQUIRED' | translate }}</div>
                    </div>
                  </md-input-container>
                  <md-input-container class="md-block" flex-gt-sm>
                    <label> {{ 'ADMIN_TEAM_TITLE' | translate }} </label>
                    <md-select ng-model="project.teamID">
                      <md-option ng-repeat="item in teams" ng-value="item.id" >
                        {{ item.name | translate }}
                      </md-option>
                    </md-select>
                  </md-input-container>
                  <md-input-container class="md-block" flex-gt-sm>
                  <label> {{ 'ADMIN_PROJEC_SILENT_START' | translate }} </label>
                    <input type="number" name="silentTimeStart" ng-model="project.silentTimeStart">
                    <div ng-messages="form.silentTimeStart.$error" ng-if="form.silentTimeStart.$dirty">
                    </div>
                  </md-input-container>
                  <md-input-container class="md-block" flex-gt-sm>
                  <label> {{ 'ADMIN_PROJEC_SILENT_END' | translate }} </label>
                    <input type="number" name="silentTimeEnd" ng-model="project.silentTimeEnd">
                  </md-input-container>
                  <md-input-container class="md-block" flex-gt-sm>
                    <md-checkbox ng-model="project.enableSilent" aria-label="checked checkbox" class="md-align-top-left">
                      {{ 'ADMIN_PROJEC_SILENT_RANGE_ENABLE_TEXT' | translate }}
                    <br/>
                    <span ng-style="{'color': 'saddlebrown'}" ng-if="!project.enableSilent">
                      {{ 'ADMIN_PROJEC_SILENT_RANGE_DEFAULT' | translate }}:
                      {{ config.alerter.defaultSilentTimeRange[0] }} ~
                      {{ config.alerter.defaultSilentTimeRange[1] }}
                    </span>
                    </md-checkbox>
                  </md-input-container>
                  <md-input-container>
                  <md-button class="md-raised" aria-label="{{ 'ADMIN_PROJECT_SAVE_TEXT' | translate }}" type="submit" ng-disabled="form.$invalid">
                      {{ 'SAVE' | translate }}
                    </md-button>
                    <md-button class="md-raised md-warn" aria-label="{{ 'ADMIN_PROJECT_DELETE_TEXT' | translate }}" type="button" ng-click="deleteProject()">
                      {{ 'DELETE' | translate }}
                    </md-button>
                  </md-input-container>
                </md-content>
              </form> <!-- ./Form -->
            </md-content> <!-- ./Edit md-content-->
          </md-tab> <!-- ./Edit -->
          <!-- Events -->
          <md-tab label="{{ 'ADMIN_PROJECT_EVENTS_TEXT' | translate }}" ng-click="watchEventLoadParams()">
            <md-content class="md-padding" ng-style="{'z-index': '9'}">
              <md-input-container>
                <md-select ng-model="eventPast">
                  <md-option ng-repeat="item in eventPasts" ng-value="item.seconds" >
                    {{ item.label | translate }}
                  </md-option>
                </md-select>
              </md-input-container>
              <md-input-container>
                <md-select ng-model="eventLevel">
                  <md-option ng-repeat="item in eventLevels" ng-value="item.value" >
                    {{ item.label | translate }}
                  </md-option>
                </md-select>
              </md-input-container>
              <!-- Table -->
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th> {{ 'ADMIN_PROJECT_EVENT_DATETIME' | translate }} </th>
                      <th> {{ 'ADMIN_PROJECT_EVENT_LEVEL' | translate }} </th>
                      <th> {{ 'ADMIN_PROJECT_EVENT_RULE' | translate }} </th>
                      <th> {{ 'ADMIN_PROJECT_EVENT_METRIC_NAME' | translate }} </th>
                      <th> {{ 'ADMIN_PROJECT_EVENT_METRIC_VALUE' | translate }} </th>
                      <th> {{ 'ADMIN_PROJECT_EVENT_METRIC_AVERAGE' | translate }} </th>
                    </tr>
                  </thead>
                  <md-progress-linear md-mode="indeterminate" ng-if="!events"></md-progress-linear>
                  <tbody>
                    <tr ng-if="!events || !events.length">
                      <td colspan="3">{{ 'NOT_FOUND_ANY_RESULT' | translate }}</td>
                    </tr>
                    <tr ng-repeat="event in events">
                      <td>{{ dateToString(event.stamp*1000) }}</td>
                      <td>
                        <span class="label label-info" ng-if="event.level==0">{{ 'ADMIN_RULE_LEVEL_LOW' | translate }}</span>
                        <span class="label label-warning" ng-if="event.level==1">{{ 'ADMIN_RULE_LEVEL_MIDDLE' | translate }}</span>
                        <span class="label label-danger" ng-if="event.level==2">{{ 'ADMIN_RULE_LEVEL_HIGH' | translate }}</span>
                      </td>
                      <td><a ng-click="goToRuleID(event.ruleID)" ng-style="{'cursor': 'pointer'}">{{ getEventRuleComment(event) }}</a></td>
                      <td>
                        <a ng-click="goToMetric(event.name, event.stamp)" ng-style="{'cursor': 'pointer'}">{{ event.name }}</a>,
                        <a href="{{getGraphiteUrl(event.name)}}" ng-if="config.webapp.graphiteUrl.length>0" target="_blank">
                          {{ 'METRIC_CHART_TEXT' | translate  }}
                        </a>
                      </td>
                      <td> {{ foldNumber(event.value) }} </td>
                      <td> {{ foldNumber(event.average) }} </td>
                    </tr>
                  </tbody>
                </table>
              </div> <!-- ./Table -->
            </md-content>
          </md-tab> <!-- ./Events -->
      </section> <!-- ./Panel content -->
    </section> <!-- Metric panel -->
  </div>
</div>
